<template>
    <video ref="video" :width="width" :height="height" :src="src" :autoplay="autoplay"></video>
</template>

<script>
export default {
  name: 'Webcam',
  props: {
    autoplay: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 300
    },
    screenshotFormat: {
      type: String,
      default: 'image/jpeg'
    }
  },
  data() {
    return {
      video: '',
      src: '',
      stream: '',
      hasUserMedia: false
    }
  },
  methods: {
    getPhot() {
      if (!this.hasUserMedia) return null

      const canvas = this.getCanvas()
      return canvas.toDataURL(this.screenshotFormat)
    },
    getCanvas() {
      if (!this.hasUserMedia) return null

      const video = this.$refs.video
      if (!this.ctx) {
        const canvas = document.createElement('canvas')
        canvas.height = video.clientHeight
        canvas.width = video.clientWidth
        this.canvas = canvas

        this.ctx = canvas.getContext('2d')
      }

      const { ctx, canvas } = this
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

      return canvas
    }
  },

  mounted: function() {
    this.video = this.$refs.video
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia

    if (navigator.getUserMedia) {
      navigator.getUserMedia({ video: true }, (stream) => {
        this.src = window.URL.createObjectURL(stream)
        this.stream = stream
        this.hasUserMedia = true
      }, (error) => {
        console.log(error)
      })
    }
  },

  beforeDestroy: function() {
    this.video.pause()
    this.src = ''
    this.stream.getTracks()[0].stop()
  },

  destroyed: function() {
    console.log('Webcam Destroyed')
  }
}
</script>
<style scoped>
  video {
    object-fit: fill
  }
</style>
